<template>
	<view>

		<view>
			<view style="margin-top:50rpx;">

				<view class="dormitoryTitle">
					<view v-for="(item,index) in dormitoryTtileArr" :key="item.id"
						@click="changeTitleFun(item,dormitoryTtileArr)">
						<span>{{item.title}}</span>
						<view class="dormitoryHealthLine" v-show="item.isShow"></view>
					</view>
				</view>
				<view class="classAttendanceWrap">
					<view
						:class="[item.grade=='优秀'?'classAttendence0':(item.grade=='良好'?'classAttendence1':(item.grade=='差'?'classAttendence2':'classAttendence3'))]"
						v-for="(item,index) in classArr" :key="index" @click="mainSkip(item)">
						<view class="classAttendenceFont">
							<view v-if="item.grade=='良好'" style="color:#0000FF;font-size: 34rpx;margin-top:0rpx">
								{{item.dormitoryNo}}
							</view>
							<view v-else style="font-size: 34rpx;">{{item.dormitoryNo}}</view>
							<view v-if="item.grade=='良好'" style="font-size: 22rpx;margin-top:10rpx">{{item.grade}}
							</view>
							<view v-else style="font-size: 22rpx;margin-top:0rpx">{{item.grade}}</view>
						</view>

					</view>
				</view>

			</view>
			<view class="logoSty" style="margin-bottom: 150rpx;"></view>
		</view>


		<my-bottom :bottomArr="attBottoms" :bottomName="bottomName"></my-bottom>
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import dormitoryTitle from '../component/dormitoryTtile.vue'
	import teachClass from "@/api/modules/teachClass.js"
	export default {
		name: 'managementIndex',
		data() {
			return {
				Attbottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "首页",
						path: '/pages/index/supervisorIndex'
					},

					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "退出",
						path: '/pages/index/login'
					},
				],
				topName: '宿舍卫生',
				userName: '畔湖宛',
				bottomName: 'clear',
				dormitoryTtileArr: [{
						id: 2,
						title: '二楼',
						isShow: true,
					},
					{
						id: 3,
						title: '三楼',
						isShow: false,
					},
					{
						id: 4,
						title: '四楼',
						isShoe: false,
					},
					{
						id: 5,
						title: '五楼',
						isShow: false,
					},
					{
						id: 6,
						title: '六楼',
						isShow: false,
					},
				],
				topTitle: "卫生",
				storeyId: 2,
				classArr: [{
					class: "202",
					grade: '优秀'
				}, {
					class: "203",
					grade: '良好'
				}, {
					class: "204",
					grade: '差'
				}, {
					class: "205",
					grade: '未点'
				}, {
					class: "206",
					grade: '优秀'
				}, {
					class: "207",
					grade: '优秀'
				}, ],
				attBottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: '/pages/classManagement/classManagementDormitoryAttendance?buildingNo=畔湖苑&type=考勤'
					},
					{
						name: 'clear',
						icon: 'iconfont icon-saoba',
						text: "卫生",
						path: '/pages/classManagement/classManageDormitoryHealth?buildingNo=畔湖苑&type=卫生'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/maintenance/dormitoryMaintenanceList?buildingNo=畔湖苑&type=报修'
					}
				],
				buildingNo: '',
				storey: "二楼",
				topType: "卫生",
				userInfo: ''
			}
		},
		mounted() {
			this.getAppDorListByStorey(this.storey)
		},
		onLoad(options) {
			this.userInfo = uni.getStorageSync("userInfo");
			this.buildingNo = options.buildingNo
			this.topType = options.type
			this.getRulesList()
		},
		methods: {
			// 获取规则列表
			getRulesList() {
				teachClass.getDictByType("sd_hygiene_classify").then(res => {
					uni.setStorageSync("dmRules", JSON.stringify(res.data))
				})
			},
			getHygieneAll(storey) {
				this.$api.dormitory.getHygieneAll(this.buildingNo, storey, this.$date).then(res => {
					if (res.data.length > 0) {
						// this.classArr = res.data
						var dataList = res.data
						for (var i = 0; i < dataList.length; i++) {
							for (var j = 0; j < this.classArr.length; j++) {
								if (dataList[i].bdormitoryId == this.classArr[j].bdormitoryId) {
									// console.log(dataList[i])
									this.$forceUpdate()
									this.classArr[j] = dataList[i]

								}
							}
						}

					} else {
						this.$forceUpdate()
						this.classArr.forEach((item, index) => {
							item.grade = '未查'
						})

					}
				})
			},
			getAppDorListByStorey(storey) {
				this.$api.dormitory.getAppDorListByStorey(this.buildingNo, storey).then(res => {
					this.classArr = res.data
					this.classArr.forEach((item, index) => {
						item.grade = "未查"
					})
					this.getHygieneAll(this.storey)
				})
			},
			mainSkip(item) {
				uni.navigateTo({
					url: `/pages/classHealth/dormitoryHealthDetail?dormitoryId=${item.bdormitoryId}&topName=${item.dormitoryNo}&storeyId=${this.storeyId}&buildingNo=${this.buildingNo}&type=卫生`
				})
			},
			changeTitleFun(item, arr) {
				for (let i in arr) {
					if (item.title != arr[i].title) {
						arr[i].isShow = false
					}
				}
				item.isShow = true
				this.storey = item.title
				this.getAppDorListByStorey(this.storey)
				this.storeyId = item.id
			}
		},
		components: {
			topCom,
			bottomCom,
			dormitoryTitle
		},
	}
</script>

<style>
	.dormitoryHealthLine {
		width: 100rpx;
		height: 8rpx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -10rpx;
	}

	.dormitoryTitle {
		color: #0000FF;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
		font-size: 42rpx;
	}

	.classAttendenceFont {
		color: white;
		text-align: center;
		margin-top: 60rpx;

	}

	.classAttendanceWrap {
		width: 700rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 10rpx;
	}

	.classAttendence0 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/A.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15rpx;
	}

	.classAttendence1 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/b.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15rpx;
	}

	.classAttendence3 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/E-1.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15rpx;
	}

	.classAttendence2 {
		width: 23%;
		height: 180rpx;
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-012.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15rpx;
	}

	.manageSearch {
		width: 650rpx;
		height: 50rpx;
		border: solid 2px #C0C0C0;
		border-radius: 20rpx;
		margin: auto;
		text-align: right;
		padding-right: 10rpx;
		font-size: 24rpx;
	}

	.indexContent {
		height: auto !important;

	}
</style>
